<template>
	<view>
		<view>
			<table-title content="退换租办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor"></view-item>
				<view-item name="房间号" :value="userMsg.userRoom" :isLast="true"></view-item>
			</view>
			<view>
				<small-title content="退换租类别"></small-title>
				<radio-group class="radiogroup-style" :disabled="!(state==='待申请')">
					<view class="first-radio">
						<radio @click="chooseReturn(0)" :disabled="!(state==='待申请')" :checked="returnChecked" color="#FF0000"></radio>
						<view>退租</view>
					</view>
					<view class="second-radio">
						<radio @click="chooseReturn(1)" :disabled="!(state==='待申请')" :checked="!returnChecked" color="#FF0000"></radio>
						<view>换租</view>
					</view>
				</radio-group>
			</view>
			<view v-if="status >= 0 && status < 9">
				<small-title :isNeed="true" content="选择工程负责人"></small-title>
				<view class="small-title">
					<select-lay :zindex="1" :disabled="!(status==0 && userRightDetail.exchangeRent.opeCommRight)" :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>
				</view>
			</view>
			<view v-if="status >= 4 && status < 9">
				<small-title :isNeed="true" content="费用结算清单"></small-title>
				<view class="download-text" @click="downloadFile(0)">费用结算清单.docx</view>
				<button v-if="status === 4 && userRightDetail.exchangeRent.opeCommRight" class="add-button" @click="uploadFile">上传文件</button>
				<small-title v-if="status === 4 && userRightDetail.exchangeRent.opeCommRight" content="费用合计"></small-title>
				<input v-if="status === 4 && userRightDetail.exchangeRent.opeCommRight" class="price-input" v-model="allPrice" @input="check" type="number" placeholder="请输入总费用" />
				<a v-if="status === 4 && userRightDetail.exchangeRent.opeCommRight">元</a>
				<view v-if="status > 4" class="cost-all">费用合计：{{allPrice}} 元</view>
			</view>
			<view v-if="allPrice > 0 && status > 5">
				<small-title content="支付信息截图"></small-title>
				<image class="pay-image" :src="chargeImg" mode="scaleToFill" @tap='chooseImage'></image>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===0 && userRightDetail.exchangeRent.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="houseKeeperVerify(1)">指派工程</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open(0)">驳回</button>
				</view>
			</view>
			<view v-if="status===1 && userRightDetail.exchangeRent.engCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="engineerConfirm">验房完毕</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===2 && userRightDetail.exchangeRent.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="recoverConfirm(3)">需要复原</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="recoverConfirm(4)">无需复原</button>
				</view>
			</view>
			<view v-if="status===4 && userRightDetail.exchangeRent.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="costConfirm">确认上传</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===6 && userRightDetail.exchangeRent.finanVerRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="fianceVerify(7)">已确认款项</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open(1)">驳回</button>
				</view>
			</view>
			<view v-if="status===7 && userRightDetail.exchangeRent.opeCommRight" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="finish">办理完毕</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<l-file
		    ref="lFile" 
			@up-success="upSuccess"
		></l-file>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrder,
		syncGetSysUsr,
		syncGetSysUsrInfo
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				userRightDetail:'',
				status:-1,
				recordId: -1,
				processNo:'待分配',
				state: '已受理',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				returnChecked:true,
				docxFileId:0,
				pdfFileId:0,
				chargeImg:'/static/uploadImg.png',                                     //支付信息截图
				chargeImgId:-1,                                     //支付信息截图
				nopassReasons:'审核通过',
				proccessListDefult:[],
				token:'',
				allPrice:'',
				datalist: [],
				tval: "value2",
				verifyType:0,      //0代表管家审核  1代表财务审核
			}
		},
		methods: {
			check: function(index) {
				//正则表达试
				console.log('this.allPrice',this.allPrice)
				let temp = (this.allPrice.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.allPrice= temp
				})
			},
			open(status) {
				this.verifyType = status
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					if(this.verifyType == 0){
						if(this.userRightDetail.knotCommission.primeAuth == 1){
							this.nopassReasons = "运营主管审核不通过，原因：" + value
						}else{
							this.nopassReasons = "楼层管家审核不通过，原因：" + value
						}
						this.houseKeeperVerify(9)
						// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
						// ...
						this.$refs.popup.close()
					}else{
						if(this.userRightDetail.exchangeRent.primeAuth == 5){
							this.nopassReasons = "财务主管审核不通过，原因：" + value
						}else{
							this.nopassReasons = "财务专员审核不通过，原因：" + value
						}
						this.fianceVerify(5)
						// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
						// ...
						this.$refs.popup.close()
					}
				}
			},
			
			selectitem(index, item) {
				if (index >= 0) {
					this.tval = item.value;
				} else {
					this.tval = ""
				}
			},
			
			chooseReturn(status){
				if(this.state==='待申请'){
					if(status == 0){
						this.returnChecked = true
					}else{
						this.returnChecked = false
					}
				}
			},
			
			async loadImg(chargeFileId){
				// let _this = this
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			
			upSuccess(e){
				console.log(e)
				this.docxFileId = e.data
			},
			
			uploadFile(){
				this.$refs.lFile.upload({
				    // #ifdef APP-PLUS
				    //（app端必传）nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
				    currentWebview: this.$mp.page.$getAppWebview(),
				    // #endif
				    //替换为你的上传接口地址
				    url: `${ONLINE_SERVER_ADDRESS_BASE_2}/file/upload`,
				    // 服务端接收附件的key
				    name: 'file',
				    //根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
				    header: {
						'Authorization': this.token,
				        // 'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mbyI6eyJ1c2VyTmFtZSI6',
				        // 'uid': '27682',
				        // 'client': 'app',
				        // 'accountid': 'DPOA9487'
				    },
				
				    // 限制选择附件的大小上限，默认10M
				    // maxSize: 20,
				
				    // 若需要在body单独添加附件名或附件大小如下方式传入组件：
				    // addName: '后端要的附件名称字段key,此处请勿写name的同值如(file)，会覆盖name',
				    // addSize: '后端要的附件大小字段key'
				
				    // body参数直接写key,value,如：
				    // date: '2020-1-1',
				    // key2: 'value2',
				});
			},
			downloadFile(fileType){
				let fileId = 0
				if(fileType == 0){
					fileId = this.docxFileId
				}else{
					fileId = this.pdfFileId
				}
				if(fileId == -1){
					uni.showModal({
						content:'找不到该文件,请检查是否已上传。',
						showCancel:false
					})
					return 0
				}
				this.$refs.lFile.download({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/file/download/` + fileId,
					token:this.token,
				})
				.then(path=>{
				    // 打开文件
				    this.$refs.lFile.open(path);
				});
			},
			
			async downloadOrderFile(fileType){
				let fileId = 0
				if(fileType == 0){
					fileId = this.docxFileId
				}else{
					fileId = this.pdfFileId
				}
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/file/download/` + fileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			
			chooseImage(){
				console.log("ceshi",this.state)
				if(this.state === '待确认缴费') {
					uni.chooseImage({
						sourceType: ['album'],
						// #ifdef MP-WEIXIN
						sizeType: ['original'],
						// #endif
						success: (res) => {
							let a = myUploadFile(this.token, res.tempFilePaths[0])
							 a.then((v)=>{
								 this.chargeImgId = v
								 console.log("zuizhongid",this.chargeImgId)
							})
							this.chargeImg = res.tempFilePaths[0];
						}
					})
				}else{
					uni.previewImage({
						current: 0,
						urls: [this.chargeImg]
					})
				}
			},
			
			finish(){
				console.log("[info]","楼层管家收尾：" + this.recordId)
				let commentMsg = ""
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					commentMsg = "运营主管已完成剩余事项办理"
				}else{
					commentMsg = "楼层管家已完成剩余事项办理"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/finish/` + this.recordId,
					header: {
						
						'Authorization': this.token,
					},
					data: {
						commentMsg: commentMsg,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("楼层管家收尾成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("楼层管家收尾调用失败")
					}
				})
			},
			
			costConfirm(){
				console.log("[info]","上传费用结算清单：" + this.recordId)
				if(!(this.docxFileId > 0)){
					uni.showModal({
						content:'请上传费用结算清单文件',
						showCancel:false
					})
					return -1
				}
				let status = 5
				let commentMsg = ""
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					commentMsg = "运营主管已上传费用结算清单，待租户确认"
				}else{
					commentMsg = "楼层管家已上传费用结算清单，待租户确认"
				}
				if(!(this.allPrice > 0)){
					status = 7
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						commentMsg = "运营主管已上传费用结算清单，且无需租户承担费用，待运营办理完毕"
					}else{
						commentMsg = "楼层管家已上传费用结算清单，且无需租户承担费用，待运营办理完毕"
					}
				}else{
					status = 5
				}
				console.log('参数测试',this.allPrice)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/cost-confirm/` + this.recordId,
					header: {
						
						'Authorization': this.token,
					},
					data: {
						status:status,
						fileId:this.docxFileId,
						allPrice:this.allPrice,
						commentMsg: commentMsg,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("上传费用结算清单成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("上传费用结算清单调用失败")
					}
				})
			},
			checkPara(){
				let flag = 0
				if(this.userList.length == 0){
					uni.showModal({
						content:'请添加人员',
						showCancel:false
					})
					flag = -1
					return flag
				}
				for(var i = 0; i < this.userList.length; i++){
					console.log(item)
					let item = this.userList[i]
					if(item.userName == ""){
						uni.showModal({
							content:'姓名不能为空',
							showCancel:false
						})
						flag = -1
						break
					}
					if(item.idCard == "" || item.idCard.length != 18){
						uni.showModal({
							content:'请输入正确的证件号码',
							showCancel:false
						})
						flag = -1
						break
					}
					if(item.firstImgId == 0 || item.secondImgId == 0){
						uni.showModal({
							content:'请点击选择身份证图片',
							showCancel:false
						})
						flag = -1
						break
					}
					if(this.chargeImgId == -1){
						uni.showModal({
							content:'请点击上传支付截图',
							showCancel:false
						})
						flag = -1
						break
					}
				}
				return flag
			},
			recoverConfirm(status){
				console.log("[info]","判断复原：" + this.recordId)
				let commentMsg = ''
				if(status == 3){
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						commentMsg = "运营主管判断需要进行房间复原"
					}else{
						commentMsg = "楼层管家判断需要进行房间复原"
					}
				}
				if(status == 4){
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						commentMsg = "运营主管判断房间已复原或无需复原"
					}else{
						commentMsg = "楼层管家判断房间已复原或无需复原"
					}
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/recover-confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						status:status,
						commentMsg: commentMsg,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("判断复原成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("判断复原调用失败")
					}
				})
			},
			
			engineerConfirm(){
				console.log("[info]","工程验房：" + this.recordId)
				if(this.userRightDetail.repair.primeAuth == 7){
					this.nopassReasons = "工程主管和租户验房完毕，且已将材料交给管家"
				}else{
					this.nopassReasons = "工程专员和租户验房完毕，且已将材料交给管家"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/engineer-confirm/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("工程验房成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("工程验房调用失败")
					}
				})
			},
			
			houseKeeperVerify(status){
				console.log("[info]","审核退换租内容：" + this.recordId)
				if(status == 9){
					this.tval = -1
				}

				if(status != 9){
					if(!(parseInt(this.tval) > 0)){
						uni.showModal({
							content:'请选择工程人员',
							showCancel:false
						});
						return -1
					}
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						this.nopassReasons = "运营主管已指派工程人员"
					}else{
						this.nopassReasons = "楼层管家已指派工程人员"
					}
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/housekeeper-verify/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						status:status,
						engineerId:parseInt(this.tval),
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("审核退换租调用失败")
					}
				})
			},
			
			fianceVerify(status){
				console.log("[info]","财务审核退换租内容：" + this.recordId)
				if(status != 5){
					if(this.userRightDetail.exchangeRent.primeAuth == 5){
						this.nopassReasons = "财务主管审核通过"
					}else{
						this.nopassReasons = "财务专员审核通过"
					}
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/surrender/fiance-verify/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						status:status,
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("财务审核退换租调用失败")
					}
				})
			},
			
			getOrder(){
				let a = syncGetOrder("surrender/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						      case 0:
						         this.state = "待管家指派"
						         break;
						      case 1:
						         this.state = "待工程验房"
						         break;
						 	 case 2:
						         this.state = "待管家处理"
						 	    break;
						 	 case 3:
						         this.state = "待租户确认"
						 	    break;
						      case 4:
						         this.state = "待管家上传"
						         break;
						 	 case 5:
						         this.state = "待确认缴费"
						 	    break;
						 	 case 6:
						         this.state = "待财务审核"
						 	    break;
						 	 case 7:
						         this.state = "楼层管家办理中"
						 	    break;
						 	 case 8:
						         this.state = "已办理完毕"
						 	    break;
						      case 9:
						         this.state = "楼层管家已驳回"
						         break;
						      default:
						         this.state = "待申请"
						 } 
						 console.log("详细",res.data.data)
						 this.processNo = res.data.data.processNo
						 this.userMsg.userCompany = res.data.data.createUserInfo.name
						 this.userMsg.userBuilding = res.data.data.createUserInfo.title
						 this.userMsg.userFloor = res.data.data.createUserInfo.floor
						 this.userMsg.userRoom = res.data.data.createUserInfo.houseNumber
						 this.docxFileId = res.data.data.feeConfirmFileId
						 this.chargeImgId = res.data.data.payScreenshotId
						 if(this.chargeImgId != null){
							 let b = this.loadImg(this.chargeImgId)
							 b.then((v)=>{
								this.chargeImg = v
							 })
						 }
						 if(res.data.data.allPrice > 0){
							 this.allPrice = res.data.data.allPrice
						 }
						 if(res.data.data.isRefund == 0){
						 	this.returnChecked = true
						 }else{
						 	this.returnChecked = false
						 }
						 this.proccessListDefult = processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 if(this.status == 0){ //如果是待指派状态 则按区域查询工程专员
						 	var areaId = uni.getStorageSync("currentUser").area_id
						 	let a = syncGetSysUsr("systemuser/area-auth/users", areaId, 8);
						 	a.then((res)=>{
						 		 if(res.data.code == 200){
						 			let resList = res.data.data.systemUserList
						 			resList.forEach((item,key) => {
						 				let temp = {label: "",value: ""}
						 				temp.label = item.name
						 				temp.value = item.id.toString()
						 				this.datalist.push(temp)
						 			});
						 			this.$forceUpdate()
						 		}
						 	})
						 }
						 if(this.status > 0 && this.status < 9){
						 	let b = syncGetSysUsrInfo("systemuser/show/" + parseInt(res.data.data.engineerSpecialistId));
							// let b = syncGetSysUsrInfo("systemuser/show/10209");
						 	b.then((v)=>{
						 		 if(v.data.code == 200){
									 let temp = {label: "",value: ""}
									 temp.label = v.data.data.name
									 temp.value = res.data.data.engineerSpecialistId
									 this.datalist.push(temp)
						 			 this.tval = temp.value
						 			 this.$forceUpdate()
						 		}
						 	})
						 }
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
		},
		onLoad(option) {
			//传入单号
			if(uni.getStorageSync('userinfo') != null){
				this.userRightDetail = uni.getStorageSync("userRight")
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.download-text {
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  border: none;
	  font: normal 16px/1 "Times New Roman", Times, serif;
	  color: rgba(18,25,232,1);
	  text-decoration: underline;
	  -o-text-overflow: ellipsis;
	  text-overflow: ellipsis;
	  margin-left: 60rpx;
	}
	.pay-image{
		border:2rpx solid;
		border-radius: 2px;
		margin: 20rpx 0 20rpx 50rpx;
		width: 126rpx;
		height: 126rpx;
	}
	.cost-all{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 300rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 300rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
	.price-input {
	  display: inline-block;
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  width: 50%;
	  padding: 9px 0 6px 20px;
	  border: 1px solid #b7b7b7;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  font: normal 16px/normal "Times New Roman", Times, serif;
	  color: rgba(0,142,198,1);
	  -o-text-overflow: clip;
	  text-overflow: clip;
	  background: rgba(252,252,252,1);
	  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
	  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
	  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
	  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	  margin-left: 50rpx;
	  margin-right: 30rpx;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
		width: 87%;
	}
</style>
